<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Transform by CodeWithHarry</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>



  <div class="wrap">
    <!-- scaleX: Scales the element on the X-axis. -->
    <div class="box">
      <div class="blue scaleX">
        scaleX
      </div>
    </div>
    <!-- scaleY: Scales the element on the Y-axis. -->
    <div class="box">
      <div class="blue scaleY">
        scaleY
      </div>
    </div>
    <!-- scale: Scales the element on both the X-axis and Y-axis. -->
    <div class="box">
      <div class="blue scale">
        scale
      </div>
    </div>
    <!-- translateX: Moves the element along the X-axis. -->
    <div class="box">
      <div class="blue translateX">
        translateX
      </div>
    </div>
    <!-- translateY: Moves the element along the Y-axis. -->
    <div class="box">
      <div class="blue translateY">
        translateY
      </div>
    </div>
    <!-- translate: Moves the element along both the X-axis and Y-axis. -->
    <div class="box">
      <div class="blue translate">
        translate
      </div>
    </div>
    <!-- matrix: A 2D transformation method using a matrix of six values. -->
    <div class="box">
      <div class="blue matrix">
        matrix
      </div>
    </div>
    <!-- rotate: Rotates the element around the Z-axis. -->
    <div class="box">
      <div class="blue rotate">
        rotate
      </div>
    </div>
    <!-- skew: Skews the element on the X-axis and Y-axis. -->
    <div class="box">
      <div class="blue skew">
        skew
      </div>
    </div>
    <!-- skewX: Skews the element on the X-axis. -->
    <div class="box">
      <div class="blue skewX">
        skewX
      </div>
    </div>
    <!-- skewY: Skews the element on the Y-axis. -->
    <div class="box">
      <div class="blue skewY">
        skewY
      </div>
    </div>
    <!-- matrix3d: A 3D transformation method using a matrix of 16 values. -->
    <div class="box">
      <div class="blue matrix3d">
        matrix3d
      </div>
    </div>
    <!-- translate3d: Moves the element along the X-axis, Y-axis, and Z-axis. -->
    <div class="box">
      <div class="blue translate3d">
        translate3d
      </div>
    </div>
    <!-- rotateY: Rotates the element around the Y-axis. -->
    <div class="box">
      <div class="blue rotateY">
        rotateY
      </div>
    </div>
    <!-- rotateX: Rotates the element around the X-axis. -->
    <div class="box">
      <div class="blue rotateX">
        rotateX
      </div>
    </div>
    <!-- translateZ: Moves the element along the Z-axis. -->
    <div class="box">
      <div class="blue translateZ">
        translateZ
      </div>
    </div>
  </div>
</body>

</html>